<template>
    
    <div class="hello" style="width=Width;height=Height;">
     
        <el-container v-if="!errorFlages">
            <utabbar :tabactiv="3"></utabbar></el-container>
            
            <el-main v-if="!errorFlages">

         
                <div class="center">
                    <h1><span>|</span>&nbsp;开设院校</h1>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="schoolName" label="院校代号" width="180">
                        </el-table-column>
                        <el-table-column prop="schoolCode" label="学校代号" width="180">
                        </el-table-column>
                        <el-table-column prop="professionalName" label="专业名称" width="180">
                        </el-table-column>
                        <el-table-column prop="professionalCode" label="专业代号" width="180">
                        </el-table-column>
                        
                    </el-table>
                </div>
                <div class="box-card2" style="" :body-style="{ padding: '0px' }">

                    <h1><span>|</span>&nbsp;学什么？</h1>

                    <div>
                        <el-descriptions class="margin-top " title="" :column="4" direction="vertical">
                            <el-descriptions-item label="详情">
                                <span :style="'font-size:' + fontSize + 'px ;'" class="fontSchool">{{ sptext }}</span>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </div>
                
              
            </el-main>
             <div  class="erro" v-if="errorFlages">
                <el-alert 
        v-if="errorFlages"
    title="未找到信息"
    type="warning"
    description="暂未收录，正在完善中"
    show-icon>
  </el-alert>
  <el-row v-if="errorFlages">
 
 <el-button type="warning" @click="$router.go(-1)">回到上一页</el-button>
</el-row>
             </div>
    </div>
    
</template>
<script>
import tabbar from "./fceecomponents/my-tabbar.vue"
import utabbar from "./fceecomponents/uitabbar.vue"
import tool from "./tool/tool";
import Vue from "vue";
import { url } from "node-libs-browser";
import imgNaturalwidthNaturalheight from "caniuse-lite/data/features/img-naturalwidth-naturalheight";

export default {
    components: {
        tabbar,
        utabbar
    },
    data() {
        return {
            screenWith: 0,
            tableData: {},
            Stext: "",
            screenSize: null,
            fontSize: null,
            schoolimg: null,
            height: null,
            flages:false,
            sImg:null,//院校图片
            imgWidth:0,
            imgHeight:0,
            errorFlages:false,
            sptext:'',
       
            pageNum:1,
            pageSize:10

            
        }
    },
    methods: {
        getwidth: function () {
            this.screenWith = tool.$getWindowWidth();
            // console.log("infO获取屏幕宽度" + this.screenWith)
            
        },
        handleSizeChange(vals) {
        console.log(`每页 ${vals} 条`);
        this.pageSize=vals
      },
        handleCurrentChange(val) {//翻页
        console.log(`当前页: ${val}`);
        //
        this.pageSize=val;
        this.getsp()


      },
     
        // scode1,ProfessionalCode
        getSchoolInfo: function (code, name) {
            var url = "/school/getSchoolinfo?CollegeCode=" + code + "&SchoolName=" + name
            tool.$request("GET", url).then(response => {
                // console.log("测试")
                this.tableData = response.rows
                console.log(response.rows)
                if(this.tableData.length==0){
                    this.errorFlages=true 
                }

            })
          

        },
        getSchoolInfoV: function (scode1,ProfessionalCode) {
            var url = "/school/getSchoolinfo?SchoolCode="+scode1+"&ProfessionalCode="+ProfessionalCode
            tool.$request("GET", url).then(response => {
                // console.log("测试")
                this.tableData = response.rows
                console.log(response.rows)
                if(this.tableData.length==0){
                    this.errorFlages=true
                    
                }

            })
            // this.flages=true

        },
        getInfo: function () {
            // console.log(执行)
            // alert("执行")
            var schoolCode = this.$route.params.id
            var schoolName = this.$route.params.name
            var scode1 = this.$route.params.scode1s
            var Professionalsl = this.$route.params.Prof
            if(schoolCode!=undefined||schoolName!=undefined){
            this.getSchoolInfo(schoolCode,schoolName)

            }
            else if(scode1!=undefined||Professionalsl!=undefined){
            this.getSchoolInfoV(scode1,Professionalsl)

                console.log(scode1)
            // alert(scode1)
            // alert(Professionalsl)
            }
            else{
                alert('参数错误')
            }
            
        
            // this.getImg()

        },

        getSchoolText: function () {
            console.log("请求")
            var schoolCode = this.$route.params.id
            let url = "http://110.42.188.221:8989/SchoolText/" + schoolCode + ".txt"
            tool.$request("GET", url).then(res => {
                console.log(res)
                this.Stext = res
            })
        },

        setScreen: function () {
            let width = tool.$getWindowWidth()
            if (width < 900) {
                // console.log("屏幕变动")
                this.height = 5
            }
        },
        getImg: function () {
            var schoolCode = this.$route.params.id
            console.log("执行img")
            console.log(schoolCode)
            var that =this
            // console.log("tb值为" + this.tableData[0].schoolCode)
            // str = schoolCode.
            let url1 = "http://110.42.188.221:8989/CampusScenery/" + schoolCode
            console.log("请求2")
            tool.$request("GET",url1).then(res=>{
                console.log(res)
                that.sImg = res
                // alert(that.sImg)
                // console.log(that.sImg)
            })
          


        },
        getsp(){
            var stitle = this.$route.params.spname;
            var url = "/specialized/Sceachspecialized?ProfessionalName="+stitle+"&pagSize="+300

            tool.$request("GET",url).then(res=>{
                console.log(res)
                this.tableData = res.rows
                var pcode = res.rows
                if(res.rows.length!=0){
                 var url2 = "/SchoolText/"+pcode[0].professionalCodeSum+".txt"
                    tool.$request("GET",url2).then(res2=>{
                        console.log(res2)
                        this.sptext=res2
                    })
                }
            })
        }

    },
    onload() {
    },
    created() {

        // this.getInfo();
        this.getsp()
        //   this.getSchoolInfo()
        this.getSchoolText()
        this.setScreen()
        this.getImg()
        this.imgWidt=tool.$getWindowWidth/10;
        this.imgHeight=tool.$getWindowHeight/10


    },
    mounted() {
        this.screenWidth = document.body.clientWidth
        window.onresize = () => {
            return (() => {
                this.screenWidth = document.body.clientWidth
            })()
        },
        // event Bus 用于无关系组件间的通信。
    Vue.prototype.$bus = new Vue()
    },
    watch: {
        screenWidth: {
            handler: function (val) {
                if (val < 900) {
                    this.fontSize = 10
                    // this.height = 20
                    console.log(val + '屏幕宽度小于900px')
                } else {
                    console.log(val + '屏幕宽度大于900px')
                }
            },
            immediate: true,
            deep: true
        },
    }

}

</script>
<style>
.ftop{
    width: 100%;
    position: absolute;
    top: 100px;
    /* left: 4rem; */
}
.erro{
  /* margin-top: 400px; */
}
.el-alert{
    text-align: center;
} 
.el-carousel__container{
    background-color: #ffff;
}

template {
    background-color: aliceblue;
}

.time {
    font-size: 13px;
    color: #999;
}


.box-card2 {
    height: 30vh;
}

@media only screen and (max-width: 600px) {

    .box-card2 {
        height: 70vh;
    }

    .fengguang {}
}

@media only screen and (max-width: 500px) {

.box-card2 {
    height: 90vh;
}

.fengguang {}
}
@media only screen and (max-width: 1000px) {

.box-card2 {
    height: 40vh;
}
.yimg{
    width: 100%;
    height: 100%;
}

@media screen and (max-width :500){
    .box-card2 {
    height: 30vh;
}

h1{
    position: absolute;
    top: 100rem;
}
.yimg{
    width: 100%;
    height: 100%;
}

}
.fengguang {}
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    height: 40vh;
}
.el-row{
    background-color: #ffff;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.image {
    width: 2.3rem;
    height: 2.3rem;
    position: relative;
    top: 1rem;
    left: 1rem;
    display: block;
}

.info {
    position: relative;
    left: 4rem;
    bottom: 2rem;
    font-size: 0.3rem;
}

.center {
    width: 100%;
    height: 100%;

    /* background-color: aquamarine; */
}

h1 {
    position: relative;
    float: left;
    top: 0.1rem;
    margin-bottom: 0.4rem;
}

h1 span {
    color: rgb(222, 48, 48);
}

/* el-table {
    position: absolute; */
    /* top: 1rem; */
/* } */
@font-face {
    font-family: Misans;
    src: url(../../src/assets/ttf/MiSans-Light.ttf);
}

@font-face {
    font-family: reg;
    src: url(../../src/assets/ttf/Regular.ttf);
}

.fontSchool {
    font-family: reg;
    font-size: 0.2rem;
    height: 10rem;


}
</style>
  